<template>
    <div 
    class="load-list" 
    :class="{'lock-height': firstLoading}"
    v-loading="loading" 
    element-loading-text="数据加载中"
    >
        <el-skeleton 
        :loading="firstLoading" 
        animated
        >
            <template slot="template">
                <div 
                class="skeleton"
                v-for="item in 8" 
                :key="item"
                >
                    <div class="row">
                        <el-skeleton-item variant="p" style="width: 60%; height: 22px;" />
                    </div>

                    <div class="row">
                        <el-skeleton-item variant="p" style="width: 300px; max-width: 100%; height: 18px;" />
                    </div>

                    <div class="row">
                        <el-skeleton-item variant="p" style="width: 80%; height: 16px;" />
                    </div>
                </div>
            </template>

            <slot></slot>
        </el-skeleton>

        <slot 
        v-if="!dataList.length && (!loading && !firstLoading)"
        name="empty"
        >
            <empty-list>
                <span>暂无数据</span>
            </empty-list>
        </slot>

        <div 
        class="list-bottom-end"
        >
            <div 
            ref="textEnd" 
            class="text-end"
            >
                {{bottomText}}
            </div>
        </div>
    </div>
</template>

<script>
import EmptyList from '@components/sys/empty-list';

export default {
    components: {
        EmptyList,
    },
    props: {
        action: {
            type: String,
            default: '',
        },
        search: {
            type: Object,
            default: () => {},
        },
        value: {
            type: Array,
            default: () => [],
        },
        lazy: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            pageindex: 0,

            isEnd: false,

            firstLoading: true,
            loading: false,

            throFun: null,
        };
    },
    computed: {
        dataList: {
            get: function () {
                return this.value;
            },
            set: function (e) {
                this.$emit('input', e);
            },
        },
        bottomText() {
            if (this.loading || this.firstLoading) {
                return '加载中...';
            }

            if (!this.isEnd) {
                return '向下滚动加载更多 ↓';
            } else {
                return '- 已经到底了 -';
            }
        },
    },
    methods: {
        queryData(reload = false) {
            if (this.loading) {
                // 正在请求
                return;
            }
            
            if (reload) {
                // 加载首页
                this.firstLoading = true;
                this.pageindex = 0;
                this.isEnd = false;
            }

            if (this.isEnd) {
                return;
            }

            this.loading = true;

            var search = {
                ...this.search,
                pageindex: this.pageindex + 1,
            };

            this.$get(this.action, search, (data, res) => {
                if (reload) {
                    // 首页
                    this.dataList = data.rows;
                } else {
                    this.dataList = [
                        ...this.dataList,
                        ...data.rows,
                    ];
                }

                this.isEnd = (data.end >= data.total);

                this.loading = false;
                this.firstLoading = false;
                this.pageindex ++;
                
                this.$emit('queryEnd', { 
                    current: this.pageindex, 
                    total: data.total,

                    res: res,
                }); //请求结束。
            });
        },

        yzqthandleScroll() {
            let bottomDom = this.$refs.textEnd;

            let seeHeight = document.documentElement.clientHeight, //当前页面可见区域高度 √
                toTop = bottomDom.getBoundingClientRect().top; //距离顶部高度 ;

            if (toTop <= seeHeight && toTop != '0') {
                this.queryData();
            }
        },

        //跳转页面
        titleClick(data) {
            this.$emit('titleClick', data);
        },

        // 节流 计时器  防止出现 push 顺序错乱
        throttle(fn, time = 100) {
            let timer = null;

            return function (...args) {
                if (timer) {
                    return;
                }

                const _this = this;

                timer = setTimeout(() => {
                    timer = null;
                }, time);

                fn.apply(_this, args);
            };
        },
    },
    mounted() {
        this.throFun = this.throttle(this.yzqthandleScroll);

        document.querySelector('.page-body').addEventListener('scroll', this.throFun);

        if (this.lazy) {
            return;
        }

        this.queryData();
    },
    beforeDestroy() {

        document.querySelector('.page-body').removeEventListener('scroll', this.throFun);
    },
};
</script>

<style lang="scss" scoped>
.load-list{
    &.lock-height{
        // min-height: 300px;
    }

    .list-bottom-end {
        padding: 20px 0 10px;

        .text-end{
            color: #909399;
            text-align: center;
            font-size: 12px;
        }
    }
}

.skeleton{
    & + .skeleton{
        margin-top: 14px;
    }

    .row{
        & + .row{
            margin-top: 8px;
        }
    }
}
</style>
